(function(ProductView, $, undefined) {
	var data = "{}";

	// reRender iu component
	ProductView.reRender = function() {
		var addFocus = setInterval(function() {
			if (document.getElementById('image_pagination')) {
				// reRender photo zoom
				$('#images_selected').addimagezoom({
					magnifiersize : [ 300, 300 ]
				});
				// reRender change focus image
				$('#image_pagination img').click(function(e) {
					slideFocus(this);
				});
				clearInterval(addFocus);
			}

		}, 500);

	}

	// injection Action Listener for create product
	ProductView.reRenderCreateProduct = function() {
		var reRenderCreate = setInterval(function() {
			//var isExist = $('#product_view .description').isExist() && $('#product_view .detail > header').isExist() && $('#product_view .price').isExist();
			var isExist = $('#product_view .detail > header').isExist();
			if (isExist) {
				// reRender photo zoom
				$('#images_selected').addimagezoom({
					magnifiersize : [ 300, 300 ]
				});
				// injection change focus image
				$('#image_pagination img').click(function(e) {
					var defaulSRC = window.location.protocol + "//" + window.location.host + '/images/plus.jpg';
					if (this.src == document.getElementById('images_selected').src || this.src == '' || this.src == defaulSRC) {
						editImage(this);						
					} 
					slideFocus(this);
				});

				// injection Action Listener for product field
//				ClientAction.enableEdit($('#product_view').get(0));
//				$('.product_view').attr('contenteditable', 'false');
				$('#product_view').addClass('fullhappy_box_shadow_orange').attr('cancelEditAction', 'cancelCreate').attr('editAction', 'saveProduct()');;
				//$('body').addClass('fullhappy_box_fade');
				$('#image_pagination img').addClass('editable');					
				$('#product_view .description').attr('contenteditable', 'true');
				$('#product_view .detail > header').attr('contenteditable', 'true');
				$('#product_view .price').attr('contenteditable', 'true');
				ClientAction.createSaveButton($('#product_view').get(0),$('#product_view').get(0));
				ClientAction.createDontSaveButton($('#product_view').get(0));
				clearInterval(reRenderCreate);
			}
		}, 500);

	}
	
	// injection Action Listener for edit product
	ProductView.reRenderEditProduct = function() {
		var reRenderEdit = setInterval(function() {
			//var isExist = $('#product_view .description').isExist() && $('#product_view .detail > header').isExist() && $('#product_view .price').isExist();
			var isExist = $('#product_view .detail > header').isExist();
			if (isExist) {
				// reRender photo zoom
				$('#images_selected').addimagezoom({
					magnifiersize : [ 300, 300 ]
				});
				// reRender change focus image
				$('#image_pagination img').click(function(e) {
					var defaulSRC = window.location.protocol + "//" + window.location.host + '/images/plus.jpg';
					if (this.src == document.getElementById('images_selected').src || this.src == '' || this.src == defaulSRC) {
						editImage(this);						
					} 
					slideFocus(this);
				});

				// add Action Listener for product field
				$('#image_pagination img').addClass('editable').attr('editAction', 'editProduct');
				$('#product_view .description').addClass('editable').attr('editAction', 'editProduct');
				$('#product_view .detail > header').addClass('editable').attr('editAction', 'editProduct');
				$('#product_view .price').addClass('editable inputNumber').attr('editAction', 'editProduct');
				clearInterval(reRenderEdit);
			}
		}, 500);

	}

	function slideFocus(_img) {
		var d = _img.parentNode.parentNode.parentNode;
		var d1 = d.getElementsByTagName('div')[0].getElementsByTagName('img')[0];
		d1.src = _img.src;
		d1.removeAttribute("style");
		$('#images_selected').addimagezoom({
			magnifiersize : [ 300, 300 ]
		});
	}
	
	function inputImage(_img) {
		var newSRC = prompt('input image link ');
		if (newSRC != null) {
			_img.src = newSRC;
			_img.title = "";
			return true;
		}
		return false;
	}
	
	function editImage(_img){
		if(inputImage(_img)){
			var editAction = $(_img).attr('editAction');
			if(editAction!=null && editAction!=0){
				eval(editAction + '(_img)');
			}
		}
	}

	
	// create iu component
	ProductView.loadProductData = function(contennerId, productId) {
		if (productId == 0) {
			data = {
				'name' : 'Đầm ren tay con duyên dáng MS 122',
				'description' : '- Đầm được may bằng chất liệu phi bóng nhập khẩu, mềm mại, thoáng '
						+ 'mát, mịn màng. <br> - Kiểu dáng thanh lịch, kết hợp kiểu cánh ' 
						+ 'dơi với đầm tôn vẻ sang trọng của bạn gái. <br> - Màu sắc: '
						+ 'nhiều màu. <br> - Đầm free size, thích hợp cho các bạn gái từ ' 
						+ '55kg trở xuống. <br> - Đầm phi sẽ giúp bạn dịu dàng khi dạo  '
						+ 'phố, thanh lịch khi đi làm, sang trọng khi đi dự tiệc. <br> -   ' 
						+ 'Có thể mua để làm quà tặng ý nghĩa dành cho các bạn gái	',
				'price' : '49000',
				'imageURLs' : '/images/plus.jpg,' 
						+ '/images/plus.jpg,'
						+ '/images/plus.jpg,' 
						+ '/images/plus.jpg,'
						+ '/images/plus.jpg'
			};
			// data = eval('(' + xmlhttp.responseText + ')');
			display(contennerId);

			// ProductView.addEditableParam();//add class 'editable' & attr
			// 'editAction'
			// ClientAction.overEditableComponentListener();
		} else {
			var xmlhttp;
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,
				// Opera,
				// Safari
				xmlhttp = new XMLHttpRequest();
			} else {// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.open("GET", "/rest/resources/product/" + productId);
			xmlhttp.send();

			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4) {
					if (xmlhttp.status == 200) {
						data = eval('(' + xmlhttp.responseText + ')');
						display(contennerId);
						// $('#images_selected').addimagezoom({
						// magnifiersize : [ 300, 300 ]
						// });
						// ProductView.addEditableParam();//add class 'editable'
						// & attr 'editAction'
						// ClientAction.overEditableComponentListener();
					} else {
						window.location.href = '/';
					}

				}
			};
		}
	};

	var display = function(contennerId) {
		var contenner = document.getElementById(contennerId);
		contenner.appendChild(slide());
		contenner.appendChild(detail());
	};
	var slide = function() {
		var article = document.createElement('article');
		article.setAttribute('class', 'images_slide');
		article.appendChild(slideBody());
		article.appendChild(slideFooter());
		return article;
	};
	var slideBody = function() {
		var isc = document.createElement('div');
		isc.setAttribute('class', 'images_selected_contenner');

		var is = document.createElement('img');
		is.setAttribute('class', 'images_selected');
		is.setAttribute('id', 'images_selected');
		is.setAttribute('src', data.imageURLs.split(',')[0]);
		isc.appendChild(is);
		return isc;
	};

	var slideFooter = function() {
		var footer = document.createElement('footer');
		var div = document.createElement('div');
		div.setAttribute('class', 'image_pagination');
		div.setAttribute('id', 'image_pagination');
		var img;
		var le = data.imageURLs.split(',').length;
		for (var i = 0; i < le; i++) {
			img = document.createElement('img');
			img.setAttribute('src', data.imageURLs.split(',')[i]);
			// img.setAttribute('onclick', 'slideFocus(this)');
			div.appendChild(img);
		}
		footer.appendChild(div);
		return footer;
	};

	var detail = function() {
		var article = document.createElement('article');
		article.setAttribute('class', 'detail');
		article.appendChild(detailHeader());
		article.appendChild(detailBody());
		article.appendChild(detailFooter());
		return article;
	};

	var detailHeader = function() {
		var header = document.createElement('header');
		// var title = document.createElement('span');
		// title.appendChild(document.createTextNode(data.name));
		// header.appendChild(title);
		header.setAttribute('id', 'product_name');
		header.setAttribute('name', 'product_name');
		header.appendChild(document.createTextNode(data.name));
		return header;
	};

	var detailBody = function() {
		var description = document.createElement('div');
		description.setAttribute('id', 'product_description');
		description.setAttribute('name', 'product_description');
		description.setAttribute('class', 'description');
		description.innerHTML = data.description.value;
		return description;
	};

	var detailFooter = function() {
		var footer = document.createElement('footer');
		var titlePrice = document.createElement('div');
		var price = document.createElement('div');

		titlePrice.setAttribute('class', 'price_title');
		titlePrice.appendChild(document.createTextNode('Giá bán: '));

		price.appendChild(document.createTextNode(data.price));
		price.setAttribute('class', 'price');
		price.setAttribute('id', 'product_price');
		price.setAttribute('name', 'product_price');
		footer.appendChild(titlePrice);
		footer.appendChild(price);
		return footer;
	};

}(window.ProductView = window.ProductView || {}, jQuery));